<template>
	<view class="my-container">
		<!-- 用户未登录 -->
		<block v-if="!token">
			<image class="avatar avatar-img" src="/static/images/default-avatar.png" mode="scaleToFill"/>
			<view class="login-desc">登录后可同步数据</view>
			<!-- #ifdef MP-WEIXIN -->
			<button class="login-btn" type="primary" @click="getUserInfo">微信用户一键登录</button>
			<!-- #endif -->
			<!-- #ifndef MP-WEIXIN -->
			<button class="login-btn" type="primary" @click="onAutoLogin">一键登录</button>
			<!-- #endif -->
		</block>
		<!-- 用户已登录 -->
		<block v-else>
			<image class="avatar avatar-img" :src="userInfo.avatarUrl" mode="scaleToFill"/>
			<view class="login-desc">{{userInfo.nickName}}</view>
			<button class="login-btn" type="default" @click="onLogOutClick">退出登录</button>
		</block>
	</view>
</template>

<script>
	import {mapState,mapActions} from 'vuex'
	export default {
		name:"my-login",
		data() {
			return {
				
			};
		},
		computed:{
			...mapState('user',['token','userInfo'])
		},
		methods:{
			...mapActions('user', ['login','logout']),
			getUserInfo(){
				uni.showLoading({
					title:'加载中'
				})
				//获取用户信息
				uni.getUserProfile({
					desc:'登录后可同步数据',
					success: async (obj) => {
						await this.login(obj)
						this.$emit('onLoginSuccess')
					},
					fail: () => {
						uni.showToast({
							title:'授权已取消',
							icon:'error',
							mask:true
						})
					},
					complete: () => {
					          // 隐藏loading
					          uni.hideLoading();
					        }
				})											
			},
			onLogOutClick(){
				uni.showModal({
					title:'提示',
					content:'退出登录将无法同步数据哦~~',
					success: ({confirm,cancel}) => {
						if(confirm){
							this.logout()
						}
					}
				})
			},
			//非微信端一键登录
			async onAutoLogin(){
				uni.showLoading({
					title:'加载中'
				})
				await this.login({
					encryptedData: 'BmGEMqpGI5w',
					        errMsg: 'getUserProfile:ok',
					        iv: 'c+NbINO4CuEWCBYGG2FxWw==',
					        rawData:
					          '{"nickName":"小慕同学","gender":1,"language":"zh_CN","city":"","province":"","country":"China","avatarUrl":"https://m.imooc.com/static/wap/static/common/img/logo-small@2x.png"}',
					        signature: '449a10f11998daf680fe546a5176e6e2973516ce',
					        userInfo: { nickName: '小慕同学', gender: 1, language: 'zh_CN', city: '', province: '' }
				})
				//发送登录成功
				this.$emit('onLoginSuccess')
				uni.hideLoading()
			}
		}
	}
</script>

<style lang="scss" scoped>
.my-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 25%;
  .avatar-img {
    width: 78px;
    height: 78px;
  }
  .login-desc {
    color: $uni-text-color-grey;
    font-size: $uni-font-size-base;
    margin-top: $uni-spacing-col-big;
  }
  .login-btn {
    margin-top: $uni-spacing-col-big;
    width: 85%;
  }
}
</style>
